<template>
	<view class="content-view">
		<!-- 左边商品图片 -->
		<view class="content-img">
			<image :src="goodsInfo.objdis.image" mode="aspectFill"></image>
		</view>
		<!-- 右边商品 -->
		<view class="content-title">
			<text class="conteng-take">{{goodsInfo.objdis.input}}</text>
			<view class="conteng-monthly">
				<block v-for="(goodsInfodata,index) in goodsInfo.objdis.tags" :key="index">
					<text>{{goodsInfodata}}</text>
				</block>
			</view>
			<view class="conteng-starting">
				<text>月售10</text>
			</view>
			<view class="conteng-price">
				<view class="conteng-shi">¥{{goodsInfo.objdis.Discount}}</view>
				<view class="conteng-hua">¥{{goodsInfo.objdis.Price}}</view>
				<view class="ordering-price">
					<image
						@click="decrease"
						src="~@/static/coen/jianhao.png" mode="widthFix"></image>
					<text class="amounting">{{goodsInfo.objdis.count}}</text>
					<image
						@click="increase"
						src="~@/static/coen/jiahao.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		props: {
			goodsInfo: {
				type: Object,
				default: {}
			}
		},
		methods: {
			...mapMutations(['updateCart']),
			// 加价
			increase() {
				// 增加商品数量
				this.goodsInfo.objdis.count += 1
				this.updateCartList()
			},

			// 减价
			decrease() {
				// 减少商品数量
				this.goodsInfo.objdis.count = this.goodsInfo.objdis.count === 0 ? 0 : this.goodsInfo.objdis.count - 1
				this.updateCartList()
			},
			// 加减价公用函数
			updateCartList() {
				const goodsInfo = {
					gid: this.goodsInfo._id,
					sid: this.goodsInfo.openid,
					count: this.goodsInfo.objdis.count,
					image: this.goodsInfo.objdis.image,
					price: this.goodsInfo.objdis.Discount,
					totalPrice: this.goodsInfo.objdis.Discount * this.goodsInfo.objdis.count
				}
				this.updateCart(goodsInfo)
			}
		}
	}
</script>

<style scoped>
	.content-view {
		display: flex;
		justify-content: space-between;
		height: 200upx !important;
		overflow: hidden;
		margin: 30upx 0;
		color: #898989;
	}

	.content-img {
		width: 180rpx !important;
		height: 200rpx !important;
		overflow: hidden;
	}

	.content-img image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
		overflow: hidden;
	}

	.content-title {
		/* width: 100%; */
		padding-left: 10upx;
		font-size: 24upx;
	}

	.conteng-take {
		color: #333333;
		height: 50upx;
		font-size: 33upx;
		font-weight: bold;
		line-height: 50upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.conteng-monthly {
		display: flex;
	}

	.conteng-monthly text {
		background: #f1f1f1;
		margin-right: 9upx;
		padding: 4upx 13upx;
		border-radius: 7upx;
		display: block;
	}

	.conteng-starting {
		display: flex;
		align-items: center;
		height: 50upx;
		line-height: 50upx;
	}

	.conteng-price image {
		width: 60upx;
		height: 60upx;
	}

	.conteng-price {
		display: flex;
		align-items: center;
	}

	.ordering-price {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}

	/* 数量 */
	.amounting {
		width: 50upx;
		text-align: center;
	}

	.conteng-hua {
		text-decoration: line-through;
	}

	.conteng-shi {
		color: #fb4e44;
		font-size: 33upx;
		width: 180upx;
		overflow: hidden;
	}
</style>
